<template>
	<div class="credit-main">	
		<section class="section-item">	
			<dy-select></dy-select>
		</section>
		<section class="section-item">	
			<dy-money :opt="moneyData"></dy-money>
		</section>	
			<section class="section-item">	
			<div class="title">{{nowTitle.name}}</div>	
			<div class="block-tag cc">
				<div :class="[{'on': tagIndex == 1}, 'tag']" @click="chooseTag(1)">近30天</div>
				<div :class="[{'on': tagIndex == 2}, 'tag']" @click="chooseTag(2)">近12月</div>
			</div>
			<chart :options="line1" theme="roma" class="line-charts"></chart>	
		</section>
		<section class="section-item">
			<div class="title" v-if="(nowTitle.quotaType == 1 || nowTitle.quotaType == 4 || nowTitle.quotaType == 6) && Object.keys(lineDetail).length">{{nowTitle.name}}分析</div>	
			<chart v-if="(nowTitle.quotaType == 1 || nowTitle.quotaType == 4 || nowTitle.quotaType == 6) && Object.keys(lineDetail).length" :options="pie1" theme="roma"></chart>	
			<dy-line opt="creditDetail"></dy-line>
		</section>
	</div>
</template>
<script>
import dicts from '@/utils/dicts'
import {merge, Event, numFormat, classifyNum} from '@/utils/index'
export default {
	name: 'loans',
    data () {	 
		return {				
			numFormat: numFormat,
			moneyData: {
				row:3,
				layoutType: 'vertical',
				api: 'creditMajor',
				dict: dicts.dictGive,
				dateList: [
					{
						name: '昨日',
						dateType: 1,							
					},{
						name: '本月',
						dateType: 2,					
					},	
				]
			},
			trendPost: {},
			tagIndex: 1,
			pie1: {},
			line1: {},
		}
	},
	computed: {
		nowTitle () {
			return this.$store.getters.nowTitle
		},
		orgId () {
			return this.$store.getters.orgId
		},
		lineDetail () {
			return this.$store.getters.lineDetail
		}
	},
	watch : {
		orgId ()  {
			this.updata();
		},
		lineDetail (val) {
			if(Object.keys(val).length > 0) {
				let pie1 = {
					legend: {
						data: []
					},
					series : [{ data:[]}]
				}
				if(val.reportDetail) {
					val.reportDetail.map((res, index) => {
						pie1.series[0].data.push({name: res.orgName, value: res.quotaValue})
					})		

					pie1.series[0].data = classifyNum(pie1.series[0].data)
					pie1.series[0].data.map(res => {
						pie1.legend.data.push(res.name)
					})
					this.pie1 = merge(this.pie, pie1)
				}	
			}
		},
		nowTitle () {			
			this.getAchievementTrend();
		}
	},
	mounted () {	
		// 初始化period 、 nowTitle
		this.$store.commit("period", {name: '', val: 1})  		
		this.$store.commit('nowTitle', {quotaType:dicts.dictGive[Object.keys(dicts.dictGive)[0]].quotaType, name:dicts.dictGive[Object.keys(dicts.dictGive)[0]].name[0]}) 
	},
    methods: {
    	// 更新数据
    	updata () {    		
    		this.getAchievementTrend();
    	},    
    	// 切换 近30天 近12月
    	chooseTag (index) {
    		this.tagIndex = index;
    		this.getAchievementTrend();
    	},      	
    	// 趋势报表
    	getAchievementTrend () {    	
    		if(!this.orgId || !this.nowTitle.quotaType) return 		
    		this.trendPost = {
    			orgId: this.orgId,
    			period : this.tagIndex,
    			quotaType: this.nowTitle.quotaType
    		}    			
	
    		api.creditTrend(this.trendPost).then(data => {  	    		
    			let line1 = {	
    				legend: {data:[]},		
					xAxis :  [{data : data.reportDetail[0].xValueList}],
					series: []
				}

				// 有百分率的情况
				if(data.reportDetail[0].yValueList[0].match("%")) {
					line1.yAxis =[
						{
							axisLabel: {
								formatter: function (value, index) {
								    return numFormat(value, "0", true) + '%'
								}
							}
						}
					]
				}

				data.reportDetail.map((res, index) => {
					let _data = ''
					let _isRatio = false
					// 有百分率的情况
					if(res.yValueList[0].match('%')) {
						_isRatio = true
						_data = []
						res.yValueList.map((r, i) => {
							_data.push(r.replace('%', ''))
						}) 
					} 

					line1.series.push({type: 'line', data: _data || res.yValueList, name: res.quotaTypeName+ (_isRatio ? ' ' : '')}) 
					line1.legend.data.push(res.quotaTypeName + (_isRatio ? ' ' : ''))
				})	
    			this.line1 = merge(this.line, line1)
			}) 
    	},  
    }
}
</script>
<style lang="less" scope>
@import '../../assets/less/base.less';
.credit-main {
	.item-part {
		padding: 0 0 .8rem;
		line-height: 1rem;
		text-align: center;

		&.on {
			background-color: @on-bg;
		}

		&>p {
			&.sum {
				font-weight: bold;
				font-size: .8rem;
			}

			&.up {
				margin: 2.5rem 0 .4rem;
				color: @up;
				font-size: .9rem;
			}

			&.down {
				color: @down;
				font-size: .7rem;
			}

			color: @h1-color;
			text-align: center;
			font-size: .6rem;
			line-height: 1rem;
		}
	}

	.line-des {
		margin: .6rem 0 .4rem;
		text-align: center;
	}

	.text {
		color: @h1-color;
		width: 80%;
		margin: 0 auto;	
		text-align: center;

		.text-name {
			display: block;
		}
		.text-num {
			display: block;
		}
	}
	.text-left {
		float: left;
	}
	.text-right {
		float: right;
		&.text-up {
			color: @up;
		}
		&.text-down {
			color: @down;
		}
	}

	.section-item {
		&:nth-child(1) {
			margin-bottom: 0;
		}
	}	
}
</style>